<template>
	<view class="uni-flex-column content">
		<scroll-view id="tab-bar" class="uni-swiper-tab" :scroll-x="true">
		    <view 
				v-for="(tab,index) in tabBars" 
				:key="tab.id" 
				class="swiper-tab-list" 
				:class="tabIndex == index ? 'active' : ''"
				:id="tab.id" 
				:data-current="index" 
				@click="tapTab"
				>{{tab.name}}
		    </view>
		</scroll-view>
		<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="changeTab">
			<swiper-item class="uni-flex-column">
				<user-info :user="basicData" />
			</swiper-item>
			<swiper-item>
				<view v-for="(item, index) in expandData" :key="index">
					<view class="uni-input-group">
						<view class="uni-input-row-line space">
							<p class="row-title row-title-grey">{{item.name}}</p>
							<view v-if="item.values.length > 0">
								<p class="uni-input row-body row-body-no-border">{{item.values[0].value}}</p>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view v-if="orgData != null">
					<view class="uni-input-group">
						<view class="uni-input-row-line space">
							<p class="row-title row-title-grey">组织名称：</p>
							<p class="uni-input row-body row-body-no-border">{{orgData.name}}</p>
						</view>
					</view>
					<view class="uni-input-group">
						<view class="uni-input-row-line space">
							<p class="row-title row-title-grey">组织路径：</p>
							<p class="uni-input row-body row-body-no-border">{{orgData.pathName}}</p>
						</view>
					</view>
				</view>
				<view class="no-data" v-else>
					<text>暂无数据</text>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="space-all" v-if="postData != null">
					<t-table>
						<t-tr>
							<t-th>岗位名称</t-th>
							<t-th>是否主岗位</t-th>
							<t-th>主负责人</t-th>
						</t-tr>
						<t-tr v-for="item in postData" :key="item.id">
							<t-td>{{ item.name }}</t-td>
							<t-td>{{ item.isMainPost | optionsFilter(yesOrNoOptions)}}</t-td>
							<t-td>{{ item.isPrincipal | optionsFilter(yesOrNoOptions)}}</t-td>
						</t-tr>
					</t-table>
				</view>
				<view class="no-data" v-else>
					<text>暂无数据</text>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="space-all" v-if="roleData.length > 0">
					<t-table>
						<t-tr>
							<t-th>角色名称</t-th>
							<t-th>子系统</t-th>
							<t-th>角色来源</t-th>
						</t-tr>
						<t-tr v-for="item in roleData" :key="item.id">
							<t-td>{{ item.name }}</t-td>
							<t-td>{{ item.subSystemName }}</t-td>
							<t-td>{{ item.source }}</t-td>
						</t-tr>
					</t-table>
				</view>
				<view class="no-data" v-else>
					<text>暂无数据</text>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="space-all" v-if="groupData.length > 0">
					<t-table>
						<t-tr>
							<t-th>组名称</t-th>
						</t-tr>
						<t-tr v-for="item in groupData" :key="item.id">
							<t-td>{{ item.name }}</t-td>
						</t-tr>
					</t-table>
				</view>
				<view class="no-data" v-else>
					<text>暂无数据</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import userInfo from "@/components/expand/user-info.vue"
	import TTable from "@/components/t-table/t-table.vue"
	import TTd from "@/components/t-table/t-td.vue"
	import TTh from "@/components/t-table/t-th.vue"
	import TTr from "@/components/t-table/t-tr.vue"
	import { getUserInfo } from '@/api/common.js'
	import constants from '@/utils/constants.js'
	
	export default {
		components: {
			userInfo,
			TTable,
			TTd,
			TTh,
			TTr
		},
		data() {
			return {
				tabIndex: 0,
				tabBars: [
					{
						name: '基本资料',
						id: '0'
					},
					{
						name: '扩展属性',
						id: '1'
					},
					{
						name: '组织信息',
						id: '2'
					},
					{
						name: '岗位信息',
						id: '3'
					},
					{
						name: '角色信息',
						id: '4'
					},
					{
						name: '用户组信息',
						id: '5'
					}
				],
				yesOrNoOptions: constants.yesOrNoOptions,
				basicData: {},
				expandData: [],
				orgData: {},
				postData: [],
				roleData: [],
				groupData: []
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				getUserInfo().then(res=>{
					this.basicData = res.data
					this.expandData = res.variables.partyAttrs
					this.orgData = res.variables.partyOrg
					this.postData = res.variables.partyPositions
					this.roleData = res.variables.partyRoles
					this.groupData = res.variables.partyGroups
				})
			},
			async changeTab(e) {
				let index = e.target.current
				this.tabIndex = index //一旦访问data就会出问题
			},
			async tapTab(e) {
				//点击tab-bar
				let tabIndex = e.target.dataset.current
				this.tabIndex = tabIndex
			}
		}
	}
</script>

<style lang="scss">
	@import '@/themes/common-detail.scss';
	@import '@/themes/common-swiper.scss';
	
	.user-head {
		float: left;
	}
	
	.head-img {
	    //border: solid 0.05rem #bdbdbd;
	    position: relative;
	    top: 7px;
	    width: 100px;
	    height: 120px;
	}
	
	.user-info {
		float: left;
		margin-left: 20px;
		width: calc(100% - 140px);
	}
	
	.user-other {
		float: left;
		margin-left: 20px;
	}
	
	.space {
		margin-left: 20px;
	}
	
	.space-all {
		margin: 10px;
	}
	
	.no-data {
		display: flex;
		min-height: 300rpx;
		background-color: #FFFFFF;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 30rpx;
		color: #353535;
	}
</style>